<template>
  <el-dialog
    title="编辑角色"
    :visible.sync="editGroupVisible"
    width="40%"
    :show-close="false"
    :close-on-click-modal="false">

    <el-form ref="editGroupDataForm" :model="editGroupDataForm" :rules="editGroupDataForm_rules" label-width="100px">
      <el-form-item label="角色名称" prop="gr_name">
        <el-input v-model="editGroupDataForm.gr_name" size="small"></el-input>
      </el-form-item>
      <el-form-item label="角色描述" prop="gr_info">
        <el-input v-model="editGroupDataForm.gr_info" size="small"></el-input>
      </el-form-item>

    </el-form>

    <span slot="footer" class="dialog-footer">
    <el-button size="mini" @click="closeAddGroup">取 消</el-button>
    <el-button size="mini" type="primary" @click="addGroupInfo">确 定</el-button>
  </span>
  </el-dialog>
</template>
<script>
  import {updateGroup} from '@/api/permission'
  export default{
    props:["isEditGroup","groupData"],
    data(){
      return {
        editGroupVisible:this.isEditGroup,
        editGroupDataForm:{
            gr_name:"",
            gr_info:""
        },
        editGroupDataForm_rules:{
          gr_name:[
            { required: true, message: '角色名不能为空', trigger: 'change' },
          ]
        }
      }
    },

    created(){
        this.editGroupDataForm = this.groupData;
    },
    methods:{
      //修改角色
      addGroupInfo(){
        this.$refs["editGroupDataForm"].validate((valid) => {
          if(valid){
            updateGroup(this.editGroupDataForm).then(res=>{
                if(res.code == 200){
                  this.$message({
                    message: '信息修改成功',
                    type: 'success'
                  });
                  this.editGroupVisible = false;
                  this.$emit("closeDialog","edit");
                }
            });
          }
        });
      },

      //取消添加角色
      closeAddGroup(){
        this.editGroupVisible = false;
        this.$emit("closeDialog","edit");
      },
    }
  }
</script>
